<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    width="650"
    placement="right"
    :closable="true"
    @close="close"
    :visible="visible"
    style="overflow: auto; padding-bottom: 53px"
  >
    <a-form>
      <a-form-item label="所拥有的权限">
        <a-tree
          checkable
          @check="onCheck"
          :checkedKeys="checkedKeys"
          :treeData="treeData"
          @expand="onExpand"
          :selectedKeys="selectedKeys"
          :replaceFields="{
            children: 'children',
            title: 'name',
            key: 'key',
            value: 'key',
          }"
          :expandedKeys="expandedKeysss"
          :checkStrictly="checkStrictly"
        >
          <span slot="hasDatarule" slot-scope="{ slotTitle, ruleFlag }">
            {{ slotTitle
            }}<a-icon
              v-if="ruleFlag"
              type="align-left"
              style="margin-left: 5px; color: red"
            ></a-icon>
          </span>
        </a-tree>
      </a-form-item>
    </a-form>

    <div class="drawer-bootom-button">
      <a-dropdown
        style="float: left"
        :trigger="['click']"
        placement="topCenter"
      >
        <a-menu slot="overlay">
          <!-- <a-menu-item key="1" @click="switchCheckStrictly(1)"
            >父子关联</a-menu-item
          >
          <a-menu-item key="2" @click="switchCheckStrictly(2)"
            >取消关联</a-menu-item
          > -->
          <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
          <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
          <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
        </a-menu>
        <a-button> 树操作 <a-icon type="up" /> </a-button>
      </a-dropdown>
      <a-popconfirm
        title="确定放弃编辑？"
        @confirm="close"
        okText="确定"
        cancelText="取消"
      >
        <a-button style="margin-right: 0.8rem">取消</a-button>
      </a-popconfirm>
      <a-button
        @click="handleSubmit(false)"
        type="primary"
        :loading="loading"
        ghost
        style="margin-right: 0.8rem"
        >仅保存</a-button
      >
      <a-button @click="handleSubmit(true)" type="primary" :loading="loading"
        >保存并关闭</a-button
      >
    </div>
  </a-drawer>
</template>
<script>
import {
  queryTreeListForRole,
  queryRolePermission,
  saveRolePermission,
} from "@/api/api";

export default {
  name: "RoleModal",
  components: {},
  data() {
    return {
      arrValues: [],
      roleId: "",
      treeData: [],
      defaultCheckedKeys: [],
      checkedKeys: [],
      expandedKeysss: [],
      allTreeKeys: [],
      autoExpandParent: true,
      checkStrictly: false,
      title: "角色权限配置",
      visible: false,
      loading: false,
      selectedKeys: [],
    };
  },
  methods: {
    onCheck(checkedKeys, e) {
      console.log("11111111111111111111111111");
      this.checkedKeys = checkedKeys; //选中状态的节点
      this.halfCheckedKeys = e.halfCheckedKeys; //半选中状态的父节点
      this.checkedKeysAll = this.checkedKeys.concat(this.halfCheckedKeys);
      console.log(this.checkedKeysAll, "===checkedKeysAll===");

      // 关联设置
      // if (this.checkStrictly) {
      //   this.checkedKeys = o.checked;
      // } else {
      //   this.checkedKeys = o;
      // }
    },
    show(roleId) {
      console.log("roleId", roleId);
      this.roleId = roleId;
      this.visible = true;
    },
    close() {
      this.reset();
      this.$emit("close");
      this.visible = false;
    },
    onExpand(expandedKeys) {
      this.expandedKeysss = expandedKeys;
      this.autoExpandParent = false;
    },
    reset() {
      this.expandedKeysss = [];
      this.checkedKeys = [];
      this.defaultCheckedKeys = [];
      this.loading = false;
    },
    expandAll() {
      this.expandedKeysss = this.allTreeKeys;
    },
    closeAll() {
      this.expandedKeysss = [];
    },
    checkALL() {
      this.checkedKeys = this.allTreeKeys;
    },
    cancelCheckALL() {
      //this.checkedKeys = this.defaultCheckedKeys
      this.checkedKeys = [];
    },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false;
      } else if (v == 2) {
        this.checkStrictly = true;
      }
    },
    handleCancel() {
      this.close();
    },
    // 保存
    handleSubmit(exit) {
      console.log(exit);
      let that = this;
      console.log(that.checkedKeysAll, "数据选择的id值");

      let checkOk = that.checkedKeysAll.indexOf(
        "b95883856957423788906ee25dfe2646"
      );
      console.log(checkOk, "首页的数据");
      if (checkOk == -1) {
        that.$message.warning("首页为必选项");
        return;
      }

      let params = {
        roleId: that.roleId,
        permissionIds: that.checkedKeysAll,
        // lastpermissionIds:that.defaultCheckedKeys.join(","),
      };
      that.loading = true;
      console.log("请求参数：", params);
      saveRolePermission(params).then((res) => {
        if (res.code == "00000") {
          that.$message.success("保存成功");
          that.loading = false;
          if (exit) {
            that.close();
          }
        } else {
          that.$message.error("保存失败");
          that.loading = false;
          if (exit) {
            that.close();
          }
        }
        this.loadData();
      });
    },

    loadData() {
      let that = this;
      queryTreeListForRole().then((res) => {
        this.treeData = res.data.treeList;
        this.allTreeKeys = res.data.ids;
        console.log("2222222");
        that.valueFunction(res.data.treeList);
        console.log(this.dataValueAll);

        queryRolePermission(this.roleId).then((res) => {
          if (res.code == "00000") {
            console.log(res.data.permissionIds);
            console.log("halfCheckedKeys", this.halfCheckedKeys);

            // 过滤出选择的子节点
            let newArr = res.data.permissionIds.filter(
              (item) => !this.dataValueAll.some((ele) => ele === item)
            );
            console.log(newArr, "newArr");
            this.checkedKeys = newArr;
            this.defaultCheckedKeys = [...res.data.permissionIds];
            this.expandedKeysss = this.allTreeKeys;
          }
        });
      });
    },

    // 过滤出父节点
    valueFunction(arrData) {
      console.log("111111111111223");
      console.log(arrData);
      arrData.forEach((item) => {
        console.log(item);
        let arrValues = [];
        if (item.children && item.children.length > 0) {
          console.log(22);
          arrValues.push(item.id);
          item.children.forEach((res) => {
            if (res.children && res.children.length > 1) {
              arrValues.push(res.id);
            }
          });
          console.log(arrValues);
        }
        this.dataValueAll = arrValues;
      });
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        this.loadData();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>